<template>
    <!-- 联系我们 -->
    <div class="guanzhu" id="follow-us" ref="follow" v-if="isShow">
      <!-- <h2 class="hometitle">联系我们</h2> -->
      <ul style="width:25%;margin-top: 5%;" class="fl">
        <li class="qqGroup" ><span>联系方式</span>王老师：15520479961</li>
        <li class="wxgzh"><span>微信号</span>胡老师：15182015332</li>
        <li class="email" ><span>邮箱帐号</span>hym2597@qq.com</li>
        <li class="qqGroup"><span>时间</span>周一至周日 08:30~22:00</li>
      </ul>
      <ul class="fl codeimg">
         <li class="wx fl"><img src="../../../static/images/wx.png"><span>微信咨询</span></li>
         <li class="wx fl"><img src="../../../static/images/wx.png"><span>QQ群咨询</span></li>
      </ul>
    </div>
</template>

<script>
import {getWebConfig} from '@/api/index'
// vuex中有mapState方法，相当于我们能够使用它的getset方法
import {mapMutations} from 'vuex'
export default {
  name: 'FollowUs',
  data () {
    return {
      contact: {},
      mailto: '',
      isShow: false,
    }
  },
  created () {
    this.getContactData()
  },
  methods: {
    // 拿到vuex中的写的方法
    ...mapMutations(['setWebConfigData']),

    getContactData: function () {
      let webConfigData = this.$store.state.app.webConfigData
      if (webConfigData.createTime) {
        this.contact = webConfigData
        let showList = this.contact.showList
        if (showList.length > 2) {
          this.isShow = true
        }
        this.mailto = 'mailto:' + this.contact.email
      } else {
		  	  this.$http.get('./static/json/getWebConfig.json').then((response) => {
          if (response.data.code == this.$ECode.SUCCESS) {
            this.contact = response.data.data
            console.log(response.data.data.showList)
            let showList = response.data.data.showList
            if (showList.length > 2) {
              this.isShow = true
            }
            this.mailto = 'mailto:' + this.contact.email
            this.setWebConfigData(response.data.data)
          }
        })
     
    }
      },
    }
  }
</script>

<style scoped>
.fl{
  float:left;
}
.guanzhu .wx img {
    width: 60%;
}
.guanzhu ul li span {
    color: #fff;
}
.guanzhu ul{
    margin-left: 150px;
    margin-top: 5%;
}
ul.codeimg li{
  border:none;
}
ul.codeimg li span{
  float: left;
  font-size: 14px;
  margin-left: 30px;
  color:#525252;
}
</style>
